<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

<h:head></h:head>
<h:body>
	<ui:composition template="../templates/templatesemheader.xhtml">
	 	<ui:define name="content">
		    <div class="container">			  
					<div class="row">
						<div class="col-md-12 text-center">
							<h1>Configurações de Jogo</h1>
							<h:form styleClass="form-horizontal">
								<h:messages id="messages" showDetail="true" styleClass="text-info bg-info :focus"/>
								
								<rich:dataTable id="tabelaJogadores" styleClass="table table-striped" headerClass="info"
									value="#{configuracaoController.listaJogador}" var="jogador" border="1">
									<f:facet name="header">
										<h:outputText value="Jogadores Cadastrados" />
									</f:facet>
									<rich:column>
										<f:facet name="header">
											<h:outputText value="Nome:" />
										</f:facet>
										<h:outputText value="#{jogador.nome}" />
									</rich:column>
									<rich:column>
										<f:facet name="header">
											<h:outputText value="Escolha sua peça:" />
										</f:facet>
										<h:selectOneMenu value="#{configuracaoController.peaoEscolhido}" converter="genericConverter">
											<f:selectItem itemValue="" itemLabel="Nunhum..." />
											<f:selectItems itemValue="#{peao}" itemLabel="#{peao.cor}"	value="#{configuracaoController.listaPeao}" var="peao">
											</f:selectItems>
											<f:ajax event="change" execute="@this" render="panelQuemVaiJogar" listener="#{configuracaoController.associarJogadorPeao(jogador)}" />
										</h:selectOneMenu>
									</rich:column>
									<f:facet name="footer">
										<rich:column>
											<a4j:outputPanel id="panelQuemVaiJogar">
												<rich:dataTable styleClass="table"
													value="#{configuracaoController.listaPeoesUtilizados}" var="peao" border="1">
													<f:facet name="header">
														<h:outputText value="Quem vai jogar !!!" />
													</f:facet>
													<rich:column>
														<f:facet name="header">
															<h:outputText value="Nome:" />
														</f:facet>
														<h:outputText value="#{peao.jogador.nome}" />
													</rich:column>
													<rich:column>
														<f:facet name="header">
															<h:outputText value="Cor:" />
														</f:facet>
														<h:outputText value="#{peao.cor}" />
													</rich:column>
												</rich:dataTable>
											</a4j:outputPanel>
										</rich:column>
									</f:facet>
						
								</rich:dataTable>
						
						
								<h:commandLink styleClass="btn btn-primary" action="#{configuracaoController.salvarConfiguracoes()}" value="Jogar" />
						
							</h:form>
						</div>
					</div>
				</div>
			</ui:define>
		</ui:composition>
</h:body>
</html>